<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			<div>某某的主页</div>
			<div>
				关注
			</div>
		</div>
		<div class="header-null"></div>
		<div class="followDetail">
			<div class="header-img">
				<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
			</div>
			<div class="title">
				某某
			</div>
			<div class="content">
				简介：官方小编，为您推送最优质的园艺消息。
			</div>
			<div class="bottom">
				多肉0棵&nbsp;&nbsp;&nbsp;关注3人
			</div>
		</div>
		<div class="follow">
			<div class="nav">
				<div :class="{'item': true, 'active': index == tabIndex}" @click="navList(index)" v-for="(item, index) in nav">
					<div>
						{{item}}
					</div>
					<div></div>
				</div>
			</div>
			<div class="solid"></div>
			<div class="follow-imgs" v-if="tabIndex == 0">
				<div class="item">
					<div class="img">
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
					</div>
					<div class="item-solid">
						<img src="../../static/img/icon/find_icon/solid.png"/>
					</div>
					<div class="bottom">
						<img src="../../static/img/icon/my_icon/basin@3x.png"/>
					</div>
				</div>
				<div class="item">
					<div class="img">
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
					</div>
					<div class="item-solid">
						<img src="../../static/img/icon/find_icon/solid.png"/>
					</div>
					<div class="bottom">
						<img src="../../static/img/icon/my_icon/basin@3x.png"/>
					</div>
				</div>
			</div>
			<div class="follow-list" v-if="tabIndex == 1">
				<div class="item" v-for="item in list" @click="route('newestDetail')">
					<div class="title">
						雨后·邂逅
					</div>
					<div class="content">
						在公司楼下偶遇这个美腻的花儿~有人认识这种花名吗？
					</div>
					<div class="imgs">
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
						<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
					</div>
					<div class="bottom">
						<div>
							<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@3x.png"/>
							喜绿-推荐优选
						</div>
						<div>
							<span>
								<img src="../../static/img/icon/my_icon/pinglun_luntan@3x.png"/>
								<span>1</span>
							</span>
							<span>
								<img src="../../static/img/icon/my_icon/pinglun_luntan@3x.png"/>
								<span>1</span>
							</span>
							<span>
								<img src="../../static/img/icon/my_icon/pinglun_luntan@3x.png"/>
								<span>1</span>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list:[1,2],
				nav: ['种植日记', '分享生活'],
				tabIndex: 0,
				show: false
			}
		},
		methods: {
			navList(index) {  //tab栏状态
				this.tabIndex = index
			}
		}
	}
</script>

<style scoped lang="less">
	.followDetail {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: #fff;
		padding: 40px 10px 0;
		margin-top: 10px;
		
		.header-img {
			width: 100px;
			height: 100px;
			
			img {
				width: 100%;
				height: 100%;
			}
		}
		
		.title {
			font-size: 16px;
			font-weight: bold;
			margin: 10px 0 5px;
		}
		
		.content {
			margin-bottom: 5px;
			color: #7b7b7b;
		}
		
		.bottom {
			font-size: 10px;
			width: 100%;
			text-align: center;
			height: 30px;
			border-bottom: 1px solid #e5e5e5;
		}
	}
	
	.follow {
		background: #fff;
		padding: 0 10px;
		
		.nav {
			display: flex;
			height: 50px;
			justify-content: center;
			align-items: center;
			
			.item {
				flex: 1;
				text-align: center;
			}
			
			.active {
				
				div:last-child {
					height: 2px;
					width: 20px;
					background: #c9eb59;	
					margin: 0 auto;
				}
			}
		}
		
		.solid {
			height: 5px;
			background: #7b7b7b;
		}
		
		.follow-imgs {
			display: flex;
			/*justify-content: center;*/
			align-items: center;
			overflow: hidden;
			/*background: #fff;*/
			
			.item {
				padding: 20px 5px 0 0;
				width: 50%;
				
				.img {
					display: flex;
					border-radius: 5px;
					overflow: hidden;
					
					img {
						width: 100%;
						height: 100%;
					}
				}
				
				.bottom {
					width: 100%;
					text-align: center;
					z-index: 2!important;
					margin-top: -25px;
					
					img {
						width: 20px;
						height: 15px;
						z-index: 2!important;
					}
				}
				
				.item-solid {
					width: 120%;
					height: 20px;
					margin-top: 5px;
					overflow: hidden;
					/*margin-top: -15px;*/
					/*margin-bottom: 5px;*/
					
					img {
						/*width: 700%;*/
						height: 10px;
					}
				}
				
				/*&:nth-child(even) {
					padding: 20px 0 0 0;
				}*/
			}
		}
		
		.follow-list {
			
			.item {
				border-bottom: 1px solid #E5E5E5;
				padding: 10px;
				
				.title {
					font-weight: bold;
					font-size: 15px;
					margin-bottom: 10px;
				}
				
				.imgs {
					display: -webkit-box;
					margin-bottom: 10px;
					
					img {
						width: 30%;
						margin-right: 5px;
					}
				}
				
				.bottom {
					display: flex;
					justify-content: space-between;
					
					div:first-child {
						color: #7b7b7b;
					}
					
					div:last-child {
						align-items: center;
						justify-content: center;
						display: flex;
						
						span {
							margin-right: 5px;
							display: flex;
							align-items: center;
						}
						
						img {
							width: 15px;
						}
					}
					
					img {
						width: 30px;
						margin-right: 5px;
					}
				}
				
			}
		}
	}
</style>